<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>个人主页</title>

    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Main Font -->
    <script src="js/libs/webfontloader.min.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

    <!-- Main Styles CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.min.css">
    <link rel="stylesheet" type="text/css" href="css/xtiper.css">
    <!--MarkDown转HTML-->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        .tag-cloud {
            font-size: 10px;
            display: inline-block;
            color: #515365;
            background: #e6ecf5;
            border-radius: 5px;
            padding: 5px;
            margin: 1px;
        }

        .like-active {
            background-color: #ff5e3a !important;
        }

        .line-limit-length {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .like-active-icon {
            fill: #ff5e3a;
        }

        .bigimg {
            width: 600px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            z-index: 9999;
            border: 10px solid #fff;
        }

        .mask {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.5;
            filter: Alpha(opacity=50);
            z-index: 98;
            transition: all 1s;
            display: none
        }
    </style>
</head>
<body class="page-has-left-panels page-has-right-panels">
<div id="wholeContent">

    <!-- Preloader -->

    <div id="hellopreloader">
        <div class="preloader">
            <svg width="45" height="45" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite"
                                 values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="8">
                        <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                                 values="6;1;2;3;4;5;6"/>
                    </circle>
                </g>
            </svg>

            <div class="text">Loading ...</div>
        </div>
    </div>

    <!-- ... end Preloader -->


    <!-- Fixed Sidebar Left -->

    <div th:replace="~{leftSidebar :: leftSidebar}"></div>

    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Left -->


    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Right -->


    <div th:replace="~{rightSidebar :: rightSiebar}"></div>

    <!-- ... end Fixed Sidebar Right -->


    <!-- Fixed Sidebar Right-Responsive -->


    <!-- ... end Fixed Sidebar Right-Responsive -->


    <!-- Header-BP -->

    <header th:replace="~{header :: header}"></header>

    <!-- ... end Header-BP -->


    <!-- Responsive Header-BP -->

    <!-- ... end Responsive Header-BP -->
    <div class="header-spacer"></div>


    <!-- Top Header-Profile -->
    <!--头部-->
    <div th:replace="~{commonOtherProfileHeader :: header}"></div>

    <!-- ... end Top Header-Profile -->
    <div class="container">
        <div class="row">

            <!-- Main Content -->

            <div class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                <div id="newsfeed-items-grid">
                    <div class="ui-block" th:each="article,articleState: ${articles}">
                        <p class="d-none articleId" th:text="${article.article.articleId}"></p>
                        <!-- Post -->
                        <article class="hentry post">
                            <div th:replace="~{profilePageCommon :: profilePagePostHeader}"></div>
                            <h3 th:if="${article.article.articleTitle} ne null"
                                th:text="${article.article.articleTitle}"></h3>
                            <a th:href="@{/read-article(uId=${article.article.userId},uName=${article.author.userName},
                            aId=${article.article.articleId},title='')}" style="color: black">
                                <p style="text-indent: 2em" class="article-content line-limit-length"
                                   th:text="${article.article.articleContent}">
                                </p>
                              <!--  <script src="js/jQuery/jquery-3.4.1.js"></script>
                                <script>
                                    $(".article-content").each(function () {
                                        $(this).html(delHtmlTag(marked($(this).html())));
                                    });

                                    function delHtmlTag(str) {
                                        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
                                    }
                                </script>-->
                            </a>
                            <div class="row" th:if="${not #strings.isEmpty(article.article.imgPath)}">
                                <div class="col-xs-6 col-md-3 mt-3" th:each="path : ${images[articleState.index]}">
                                    <a href="javascript:void(0)" class="thumbnail">
                                        <img th:src="${path}" class="card-img-top smallimg" alt="..."
                                             style="height: 100%">
                                    </a>
                                </div>
                            </div>

                            <div class="post-additional-info inline-items">

                                <a href="#" class="post-add-icon inline-items"
                                   th:classappend="${whetherLike[articleState.index]} == true ? 'like-active-icon' : '' "
                                   onclick="giveLike(this);return false;">
                                    <svg class="olymp-heart-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span th:text="${article.likeCount}"></span>
                                </a>
                                <div class="likeRefresh">
                                    <ul class="friends-harmonic" th:if="${article.likeUserList.size() > 0}">
                                        <div>
                                            <li th:if="${likeState.index <= 5}"
                                                th:each="likeUser, likeState : ${article.likeUserList}">
                                                <a href="#"
                                                   th:href="@{/lookUserProfilePage(userName=${likeUser.userName})}">
                                                    <img th:src="${likeUser.imagePath}" alt="friend">
                                                </a>
                                            </li>
                                        </div>
                                    </ul>

                                    <div class="names-people-likes">
                                        <div th:if="${article.likeUserList.size() > 0}">
                                            <a href="#" th:text="${article.likeUserList.get(0).userName}"
                                               th:href="@{/lookUserProfilePage(userName=${article.likeUserList.get(0).userName})}"></a>
                                            and
                                            <br><span th:text="${article.likeUserList.size()}"></span>
                                            <span>more liked this</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="comments-shared">
                                    <a href="#" class="post-add-icon inline-items"
                                       onclick="showPostComment(this);return false;">
                                        <svg class="olymp-speech-balloon-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                        </svg>
                                        <span th:text="${article.commentCount}"></span>
                                    </a>

                                    <a href="#" class="post-add-icon inline-items" onclick="shareContent(this);return false;">
                                        <svg class="olymp-share-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon"></use>
                                        </svg>
                                        <span>0</span>
                                    </a>
                                </div>


                            </div>
                        </article>
                        <!-- .. end Post -->
                        <form class="comment-form inline-items d-none">
                            <div class="post__author author vcard inline-items">
                                <div th:if="${session.loginUser != null}">
                                    <img th:src="${session.loginUser.imagePath}" alt="author">
                                </div>
                                <div class="form-group with-icon-right is-empty">
                                    <textarea class="form-control" placeholder=""></textarea>
                                    <div class="add-options-message">
                                        <a href="#" class="options-message" data-toggle="modal"
                                           data-target="#update-header-photo">
                                            <svg class="olymp-camera-icon">
                                                <use xlink:href="#olymp-camera-icon"></use>
                                            </svg>
                                        </a>
                                    </div>
                                    <span class="material-input"></span></div>
                            </div>
                            <button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
                                发表评论
                            </button>
                            <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
                                    onclick="hideComment(this);return false;">
                                取消
                            </button>
                        </form>
                        <!-- Comments -->
                        <ul class="comments-list" th:if="${article.articleComments.size() > 0}">
                            <li class="comment-item" th:each="comment,commentState : ${article.articleComments}">
                                <p class="d-none" th:text="${comment.articleComment.articleCommentId}"></p>
                                <div class="post__author author vcard inline-items">
                                    <img th:src="${comment.imagePath}" alt="author">
                                    <div class="author-date">
                                        <a class="h6 post__author-name fn"
                                           th:href="@{/lookUserProfilePage(userName=${comment.userName})}"
                                           th:text="${comment.userName}"></a>
                                        <div class="post__date">
                                            <time class="published" datetime="2017-03-24T18:18"
                                                  th:text="${#dates.format(comment.articleComment.commentTime, 'yyyy/MM/dd HH:mm')}">
                                            </time>
                                        </div>
                                    </div>

                                    <a href="#" class="more">
                                        <svg class="olymp-three-dots-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                        </svg>
                                    </a>

                                </div>

                                <p th:text="${comment.articleComment.commentContent}"></p>

                                <a href="#" class="post-add-icon inline-items">
                                    <svg class="olymp-heart-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span>8</span>
                                </a>
                                <a href="#" class="reply" onclick="showComment(this, 0);return false;">回复</a>
                                <ul class="children" th:if="${comment.childComments.size() > 0}">
                                    <li class="comment-item"
                                        th:each="childComment,childState : ${comment.childComments}">
                                        <p class="d-none" th:text="${childComment.articleComment.articleCommentId}"></p>
                                        <div class="post__author author vcard inline-items">
                                            <img th:src="${childComment.imagePath}" alt="author">
                                            <div class="author-date">
                                                <a class="h6 post__author-name fn" href="#"
                                                   th:href="@{/lookUserProfilePage(userName=${childComment.userName})}"
                                                   th:text="${childComment.userName}"></a>
                                                <div th:if="${childComment.toUserName} ne null"
                                                     style="display: inline-block">
                                                    <span>回复</span>
                                                    <a th:href="@{/lookUserProfilePage(userName=${childComment.toUserName})}"
                                                       th:text="'@'+${childComment.toUserName}"></a>
                                                </div>
                                                <div class="post__date">
                                                    <time class="published" datetime="2017-03-24T18:18"
                                                          th:text="${#dates.format(childComment.articleComment.commentTime, 'yyyy/MM/dd HH:mm')}">
                                                    </time>
                                                </div>
                                            </div>
                                            <a href="#" class="more">
                                                <svg class="olymp-three-dots-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                                </svg>
                                            </a>
                                        </div>
                                        <p th:text="${childComment.articleComment.commentContent}"></p>
                                        <a href="#" class="post-add-icon inline-items">
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span>2</span>
                                        </a>
                                        <a href="#" class="reply" onclick="showComment(this, 1);return false;">回复</a>
                                    </li>
                                </ul>
                                <a th:href="@{/read-article(uId=${article.article.userId},uName=${article.author.userName},
                            aId=${article.article.articleId},title='')}"
                                   class="more-comments" th:if="${article.articleComments.size() > 2}">View more
                                    comments <span>+</span></a>
                            </li>
                        </ul>
                        <!-- ... end Comments -->

                    </div>
                </div>
                <p class="d-none" th:text="${visitUser.userName}"></p>
                <a id="load-more-button" href="#" class="btn btn-control btn-more" data-load-link="items-to-load.html"
                   data-container="newsfeed-items-grid" onclick="loadMore(this);return false;">
                    <svg class="olymp-three-dots-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                    </svg>
                </a>
            </div>

            <!-- ... end Main Content -->


            <!-- Left Sidebar -->

            <div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                <!--待修改-->
                <!--<div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Profile Intro</h6>
                    </div>
                    <div class="ui-block-content">

                        &lt;!&ndash; W-Personal-Info &ndash;&gt;

                        <ul class="widget w-personal-info item-block">
                            <li>
                                <span class="title">About Me:</span>
                                <span class="text">Hi, I’m James, I’m 36 and I work as a Digital Designer for the  “Daydreams” Agency in Pier 56.</span>
                            </li>
                            <li>
                                <span class="title">Favourite TV Shows:</span>
                                <span class="text">Breaking Good, RedDevil, People of Interest, The Running Dead, Found,  American Guy.</span>
                            </li>
                            <li>
                                <span class="title">Favourite Music Bands / Artists:</span>
                                <span class="text">Iron Maid, DC/AC, Megablow, The Ill, Kung Fighters, System of a Revenge.</span>
                            </li>
                        </ul>

                        &lt;!&ndash; .. end W-Personal-Info &ndash;&gt;
                        &lt;!&ndash; W-Socials &ndash;&gt;

                        <div class="widget w-socials">
                            <h6 class="title">Other Social Networks:</h6>
                            <a href="#" class="social-item bg-facebook">
                                <i class="fab fa-facebook-f" aria-hidden="true"></i>
                                Facebook
                            </a>
                            <a href="#" class="social-item bg-twitter">
                                <i class="fab fa-twitter" aria-hidden="true"></i>
                                Twitter
                            </a>
                            <a href="#" class="social-item bg-dribbble">
                                <i class="fab fa-dribbble" aria-hidden="true"></i>
                                Dribbble
                            </a>
                        </div>


                        &lt;!&ndash; ... end W-Socials &ndash;&gt;
                    </div>
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">James’s Badges</h6>
                    </div>
                    <div class="ui-block-content">

                        &lt;!&ndash; W-Badges &ndash;&gt;

                        <ul class="widget w-badges">
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge1.png" alt="author">
                                    <div class="label-avatar bg-primary">2</div>
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge4.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge3.png" alt="author">
                                    <div class="label-avatar bg-blue">4</div>
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge6.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge11.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge8.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge10.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge13.png" alt="author">
                                    <div class="label-avatar bg-breez">2</div>
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge7.png" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="24-CommunityBadges.html">
                                    <img src="img/badge12.png" alt="author">
                                </a>
                            </li>
                        </ul>

                        &lt;!&ndash;.. end W-Badges &ndash;&gt;
                    </div>
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">My Spotify Playlist</h6>
                    </div>

                    &lt;!&ndash; W-Playlist &ndash;&gt;

                    <ol class="widget w-playlist">
                        <li class="js-open-popup" data-popup-target=".playlist-popup">
                            <div class="playlist-thumb">
                                <img src="img/playlist6.jpg" alt="thumb-composition">
                                <div class="overlay"></div>
                                <a href="#" class="play-icon">
                                    <svg class="olymp-music-play-icon-big">
                                        <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                                    </svg>
                                </a>
                            </div>

                            <div class="composition">
                                <a href="#" class="composition-name">The Past Starts Slow...</a>
                                <a href="#" class="composition-author">System of a Revenge</a>
                            </div>

                            <div class="composition-time">
                                <time class="published" datetime="2017-03-24T18:18">3:22</time>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                    </svg>
                                    <ul class="more-dropdown">
                                        <li>
                                            <a href="#">Add Song to Player</a>
                                        </li>
                                        <li>
                                            <a href="#">Add Playlist to Player</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </li>

                        <li class="js-open-popup" data-popup-target=".playlist-popup">
                            <div class="playlist-thumb">
                                <img src="img/playlist7.jpg" alt="thumb-composition">
                                <div class="overlay"></div>
                                <a href="#" class="play-icon">
                                    <svg class="olymp-music-play-icon-big">
                                        <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                                    </svg>
                                </a>
                            </div>

                            <div class="composition">
                                <a href="#" class="composition-name">The Pretender</a>
                                <a href="#" class="composition-author">Kung Fighters</a>
                            </div>

                            <div class="composition-time">
                                <time class="published" datetime="2017-03-24T18:18">5:48</time>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                    </svg>
                                    <ul class="more-dropdown">
                                        <li>
                                            <a href="#">Add Song to Player</a>
                                        </li>
                                        <li>
                                            <a href="#">Add Playlist to Player</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                        <li class="js-open-popup" data-popup-target=".playlist-popup">
                            <div class="playlist-thumb">
                                <img src="img/playlist8.jpg" alt="thumb-composition">
                                <div class="overlay"></div>
                                <a href="#" class="play-icon">
                                    <svg class="olymp-music-play-icon-big">
                                        <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                                    </svg>
                                </a>
                            </div>

                            <div class="composition">
                                <a href="#" class="composition-name">Blood Brothers</a>
                                <a href="#" class="composition-author">Iron Maid</a>
                            </div>

                            <div class="composition-time">
                                <time class="published" datetime="2017-03-24T18:18">3:06</time>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                    </svg>
                                    <ul class="more-dropdown">
                                        <li>
                                            <a href="#">Add Song to Player</a>
                                        </li>
                                        <li>
                                            <a href="#">Add Playlist to Player</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                        <li class="js-open-popup" data-popup-target=".playlist-popup">
                            <div class="playlist-thumb">
                                <img src="img/playlist9.jpg" alt="thumb-composition">
                                <div class="overlay"></div>
                                <a href="#" class="play-icon">
                                    <svg class="olymp-music-play-icon-big">
                                        <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                                    </svg>
                                </a>
                            </div>

                            <div class="composition">
                                <a href="#" class="composition-name">Seven Nation Army</a>
                                <a href="#" class="composition-author">The Black Stripes</a>
                            </div>

                            <div class="composition-time">
                                <time class="published" datetime="2017-03-24T18:18">6:17</time>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                    </svg>
                                    <ul class="more-dropdown">
                                        <li>
                                            <a href="#">Add Song to Player</a>
                                        </li>
                                        <li>
                                            <a href="#">Add Playlist to Player</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                        <li class="js-open-popup" data-popup-target=".playlist-popup">
                            <div class="playlist-thumb">
                                <img src="img/playlist10.jpg" alt="thumb-composition">
                                <div class="overlay"></div>
                                <a href="#" class="play-icon">
                                    <svg class="olymp-music-play-icon-big">
                                        <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                                    </svg>
                                </a>
                            </div>

                            <div class="composition">
                                <a href="#" class="composition-name">Killer Queen</a>
                                <a href="#" class="composition-author">Archiduke</a>
                            </div>

                            <div class="composition-time">
                                <time class="published" datetime="2017-03-24T18:18">5:40</time>
                                <div class="more">
                                    <svg class="olymp-three-dots-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                    </svg>
                                    <ul class="more-dropdown">
                                        <li>
                                            <a href="#">Add Song to Player</a>
                                        </li>
                                        <li>
                                            <a href="#">Add Playlist to Player</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </ol>

                    &lt;!&ndash; .. end W-Playlist &ndash;&gt;
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Twitter Feed</h6>
                    </div>

                    &lt;!&ndash; W-Twitter &ndash;&gt;

                    <ul class="widget w-twitter">
                        <li class="twitter-item">
                            <div class="author-folder">
                                <img src="img/twitter-avatar1.png" alt="avatar">
                                <div class="author">
                                    <a href="#" class="author-name">Space Cowboy</a>
                                    <a href="#" class="group">@james_spiegelOK</a>
                                </div>
                            </div>
                            <p>Tomorrow with the agency we will run 5 km for charity. Come and give us your support!
                                <a href="#" class="link-post">#Daydream5K</a></p>
                            <span class="post__date">
							<time class="published" datetime="2017-03-24T18:18">
								2 hours ago
							</time>
						</span>
                        </li>
                        <li class="twitter-item">
                            <div class="author-folder">
                                <img src="img/twitter-avatar1.png" alt="avatar">
                                <div class="author">
                                    <a href="#" class="author-name">Space Cowboy</a>
                                    <a href="#" class="group">@james_spiegelOK</a>
                                </div>
                            </div>
                            <p>Check out the new website of “The Bebop Bar”! <a href="#"
                                                                                class="link-post">bytle/thbp53f</a>
                            </p>
                            <span class="post__date">
							<time class="published" datetime="2017-03-24T18:18">
								16 hours ago
							</time>
						</span>
                        </li>
                        <li class="twitter-item">
                            <div class="author-folder">
                                <img src="img/twitter-avatar1.png" alt="avatar">
                                <div class="author">
                                    <a href="#" class="author-name">Space Cowboy</a>
                                    <a href="#" class="group">@james_spiegelOK</a>
                                </div>
                            </div>
                            <p>The Sunday is the annual agency camping trip and I still haven’t got a tent
                                <a href="#" class="link-post">#TheWild #Indoors</a></p>
                            <span class="post__date">
							<time class="published" datetime="2017-03-24T18:18">
								Yesterday
							</time>
						</span>
                        </li>
                    </ul>


                    &lt;!&ndash; .. end W-Twitter &ndash;&gt;
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Last Videos</h6>
                    </div>
                    <div class="ui-block-content">

                        &lt;!&ndash; W-Latest-Video &ndash;&gt;

                        <ul class="widget w-last-video">
                            <li>
                                <a href="https://vimeo.com/ondemand/viewfromabluemoon4k/147865858"
                                   class="play-video play-video&#45;&#45;small">
                                    <svg class="olymp-play-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-play-icon"></use>
                                    </svg>
                                </a>
                                <img src="img/video8.jpg" alt="video">
                                <div class="video-content">
                                    <div class="title">System of a Revenge - Hypnotize...</div>
                                    <time class="published" datetime="2017-03-24T18:18">3:25</time>
                                </div>
                                <div class="overlay"></div>
                            </li>
                            <li>
                                <a href="https://youtube.com/watch?v=excVFQ2TWig" class="play-video play-video&#45;&#45;small">
                                    <svg class="olymp-play-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-play-icon"></use>
                                    </svg>
                                </a>
                                <img src="img/video7.jpg" alt="video">
                                <div class="video-content">
                                    <div class="title">Green Goo - Live at Dan’s Arena</div>
                                    <time class="published" datetime="2017-03-24T18:18">5:48</time>
                                </div>
                                <div class="overlay"></div>
                            </li>
                        </ul>

                        &lt;!&ndash; .. end W-Latest-Video &ndash;&gt;
                    </div>
                </div>-->

                <!--热门文章-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">热门文章</h6>
                    </div>
                    <div class="ui-block-content">

                        <!-- W-Personal-Info -->

                        <ul class="widget w-personal-info item-block">
                            <li th:each="article:${famousArticles}" style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6" th:text="${article.articleTitle}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--标签云-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">标签云</h6>
                    </div>
                    <div class="ui-block-content">
                        <a th:if="${tagS.count >= 6 and tagS.count < 9}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 18px"
                           class="tag-cloud" href=""></a>
                        <a th:if="${tagS.count >= 3 and tagS.count < 6}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 14px"
                           class="tag-cloud" href=""></a>
                        <a th:if="${tagS.count > 0 and tagS.count < 3}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 10px"
                           class="tag-cloud" href=""></a>
                    </div>
                </div>
                <!--分类专栏-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">分类专栏</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li th:each="kindS:${kindToShows}" style="margin-top: -20px;padding: 15px 10px;">
                                <a href="#" style="font-weight: 300" class="h6"
                                   th:text="${kindS.getArticleKindName()}"></a>
                                <span class="float-right" th:text="${kindS.count + '篇'}"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- ... end Left Sidebar -->


            <!-- Right Sidebar -->

            <div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
                <!--待修改-->
                <!--    <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Last Photos</h6>
                    </div>
                    <div class="ui-block-content">

                        &lt;!&ndash; W-Latest-Photo &ndash;&gt;

                        <ul class="widget w-last-photo js-zoom-gallery">
                            <li>
                                <a href="img/last-photo10-large.jpg">
                                    <img src="img/last-photo10-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot11-large.jpg">
                                    <img src="img/last-phot11-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot12-large.jpg">
                                    <img src="img/last-phot12-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot13-large.jpg">
                                    <img src="img/last-phot13-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot14-large.jpg">
                                    <img src="img/last-phot14-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot15-large.jpg">
                                    <img src="img/last-phot15-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot16-large.jpg">
                                    <img src="img/last-phot16-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot17-large.jpg">
                                    <img src="img/last-phot17-large.jpg" alt="photo">
                                </a>
                            </li>
                            <li>
                                <a href="img/last-phot18-large.jpg">
                                    <img src="img/last-phot18-large.jpg" alt="photo">
                                </a>
                            </li>
                        </ul>


                        &lt;!&ndash; .. end W-Latest-Photo &ndash;&gt;
                    </div>
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Blog Posts</h6>
                    </div>
                    &lt;!&ndash; W-Blog-Posts &ndash;&gt;

                    <ul class="widget w-blog-posts">
                        <li>
                            <article class="hentry post">

                                <a href="#" class="h4">My Perfect Vacations in South America and Europe</a>

                                <p>Lorem ipsum dolor sit amet, consect adipisicing elit, sed do eiusmod por incidid ut
                                    labore et.</p>

                                <div class="post__date">
                                    <time class="published" datetime="2017-03-24T18:18">
                                        7 hours ago
                                    </time>
                                </div>

                            </article>
                        </li>
                        <li>
                            <article class="hentry post">

                                <a href="#" class="h4">The Big Experience of Travelling Alone</a>

                                <p>Lorem ipsum dolor sit amet, consect adipisicing elit, sed do eiusmod por incidid ut
                                    labore et.</p>

                                <div class="post__date">
                                    <time class="published" datetime="2017-03-24T18:18">
                                        March 18th, at 6:52pm
                                    </time>
                                </div>

                            </article>
                        </li>
                    </ul>

                    &lt;!&ndash; .. end W-Blog-Posts &ndash;&gt;
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Friends (86)</h6>
                    </div>
                    <div class="ui-block-content">

                        &lt;!&ndash; W-Faved-Page &ndash;&gt;

                        <ul class="widget w-faved-page js-zoom-gallery">
                            <li>
                                <a href="#">
                                    <img src="img/avatar38-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar24-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar36-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar35-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar34-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar33-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar32-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar31-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar30-sm.jpg" alt="author">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar29-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar28-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar27-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar26-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/avatar25-sm.jpg" alt="user">
                                </a>
                            </li>
                            <li class="all-users">
                                <a href="#">+74</a>
                            </li>
                        </ul>

                        &lt;!&ndash; .. end W-Faved-Page &ndash;&gt;
                    </div>
                </div>
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">Favourite Pages</h6>
                    </div>

                    &lt;!&ndash; W-Friend-Pages-Added &ndash;&gt;

                    <ul class="widget w-friend-pages-added notification-list friend-requests">
                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar41-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">The Marina Bar</a>
                                <span class="chat-message-item">Restaurant / Bar</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar42-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Tapronus Rock</a>
                                <span class="chat-message-item">Rock Band</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar43-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Pixel Digital Design</a>
                                <span class="chat-message-item">Company</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar44-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Thompson’s Custom Clothing Boutique</a>
                                <span class="chat-message-item">Clothing Store</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar45-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Crimson Agency</a>
                                <span class="chat-message-item">Company</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar46-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Mannequin Angel</a>
                                <span class="chat-message-item">Clothing Store</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                            <a href="#">
                                <svg class="olymp-star-icon"><use
                                        xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
                            </a>
                        </span>
                        </li>
                    </ul>

                    &lt;!&ndash; .. end W-Friend-Pages-Added &ndash;&gt;
                </div>
               <div class="ui-block">
                   <div class="ui-block-title">
                       <h6 class="title">James's Poll</h6>
                   </div>
                   <div class="ui-block-content">

                       &lt;!&ndash; W-Pool &ndash;&gt;

                       <ul class="widget w-pool">
                           <li>
                               <p>If you had to choose, which actor do you prefer to be the next Darkman? </p>
                           </li>
                           <li>
                               <div class="skills-item">
                                   <div class="skills-item-info">
                                   <span class="skills-item-title">
                                       <span class="radio">
                                           <label>
                                               <input type="radio" name="optionsRadios">
                                               Thomas Bale
                                           </label>
                                       </span>
                                   </span>
                                       <span class="skills-item-count">
                                       <span class="count-animate" data-speed="1000" data-refresh-interval="50"
                                             data-to="62" data-from="0"></span>
                                       <span class="units">62%</span>
                                   </span>
                                   </div>
                                   <div class="skills-item-meter">
                                       <span class="skills-item-meter-active bg-primary" style="width: 62%"></span>
                                   </div>

                                   <div class="counter-friends">12 friends voted for this</div>

                                   <ul class="friends-harmonic">
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic1.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic2.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic3.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic4.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic5.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic6.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic7.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic8.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic9.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#" class="all-users">+3</a>
                                       </li>
                                   </ul>
                               </div>
                           </li>

                           <li>
                               <div class="skills-item">
                                   <div class="skills-item-info">
                                   <span class="skills-item-title">
                                       <span class="radio">
                                           <label>
                                               <input type="radio" name="optionsRadios">
                                               Ben Robertson
                                           </label>
                                       </span>
                                   </span>
                                       <span class="skills-item-count">
                                       <span class="count-animate" data-speed="1000" data-refresh-interval="50"
                                             data-to="27" data-from="0"></span>
                                       <span class="units">27%</span>
                                   </span>
                                   </div>
                                   <div class="skills-item-meter">
                                       <span class="skills-item-meter-active bg-primary" style="width: 27%"></span>
                                   </div>
                                   <div class="counter-friends">7 friends voted for this</div>

                                   <ul class="friends-harmonic">
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic7.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic8.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic9.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic10.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic11.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic12.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic13.jpg" alt="friend">
                                           </a>
                                       </li>
                                   </ul>
                               </div>
                           </li>

                           <li>
                               <div class="skills-item">
                                   <div class="skills-item-info">
                                   <span class="skills-item-title">
                                       <span class="radio">
                                           <label>
                                               <input type="radio" name="optionsRadios">
                                               Michael Streiton
                                           </label>
                                       </span>
                                   </span>
                                       <span class="skills-item-count">
                                       <span class="count-animate" data-speed="1000" data-refresh-interval="50"
                                             data-to="11" data-from="0"></span>
                                       <span class="units">11%</span>
                                   </span>
                                   </div>
                                   <div class="skills-item-meter">
                                       <span class="skills-item-meter-active bg-primary" style="width: 11%"></span>
                                   </div>

                                   <div class="counter-friends">2 people voted for this</div>

                                   <ul class="friends-harmonic">
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic14.jpg" alt="friend">
                                           </a>
                                       </li>
                                       <li>
                                           <a href="#">
                                               <img src="img/friend-harmonic15.jpg" alt="friend">
                                           </a>
                                       </li>
                                   </ul>
                               </div>
                           </li>
                       </ul>

                       &lt;!&ndash; .. end W-Pool &ndash;&gt;
                       <a href="#" class="btn btn-md-2 btn-border-think custom-color c-grey full-width">Vote Now!</a>
                   </div>
               </div>-->

                <!--公告-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">公告</h6>
                    </div>
                    <div class="ui-block-content">
                        <div class="text" style="text-indent: 1em">
                            喜欢我写的文章大家可以关注我哦！这是对我最大的鼓励，我将为你创造更加优秀的文章。
                        </div>
                        <hr>
                        <div><img style="width: 100%" src="img/bg-birthdays1.jpg" alt=""></div>
                    </div>
                </div>
                <!--友情链接-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">友情链接</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">个人博客</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">GitHub</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">简书</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">公众号</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--文章归档-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">文章归档</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li th:each="archive:${archives}" style="margin-top: -20px;padding: 15px 10px;">
                                <a href="#" style="font-weight: 300" class="h6" th:text="${archive.date}"></a>
                                <span class="float-right" th:text="${archive.count + '篇'}"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- ... end Right Sidebar -->

        </div>
    </div>

    <!-- Window-popup Update Header Photo -->

    <div th:replace="~{profilePageModal :: update-header-photo}"></div>
    <div th:replace="~{profilePageModal :: update-user-photo}"></div>

    <!-- ... end Window-popup Update Header Photo -->


    <!-- Playlist Popup -->

    <div class="window-popup playlist-popup" tabindex="-1" role="dialog" aria-labelledby="playlist-popup"
         aria-hidden="true">

        <a href="" class="icon-close js-close-popup">
            <svg class="olymp-close-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
            </svg>
        </a>

        <div class="mCustomScrollbar">
            <table class="playlist-popup-table">

                <thead>

                <tr>

                    <th class="play">
                        PLAY
                    </th>

                    <th class="cover">
                        COVER
                    </th>

                    <th class="song-artist">
                        SONG AND ARTIST
                    </th>

                    <th class="album">
                        ALBUM
                    </th>

                    <th class="released">
                        RELEASED
                    </th>

                    <th class="duration">
                        DURATION
                    </th>

                    <th class="spotify">
                        GET IT ON SPOTIFY
                    </th>

                    <th class="remove">
                        REMOVE
                    </th>
                </tr>

                </thead>

                <tbody>
                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist19.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">We Can Be Heroes</a>
                            <a href="#" class="composition-author">Jason Bowie</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Ziggy Firedust</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist6.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">The Past Starts Slow and Ends</a>
                            <a href="#" class="composition-author">System of a Revenge</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Wonderize</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist7.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">The Pretender</a>
                            <a href="#" class="composition-author">Kung Fighters</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Warping Lights</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist8.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Seven Nation Army</a>
                            <a href="#" class="composition-author">The Black Stripes</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition ">Icky Strung (LIVE at Cube Garden)</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist9.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Leap of Faith</a>
                            <a href="#" class="composition-author">Eden Artifact</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">The Assassins’s Soundtrack</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist10.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Killer Queen</a>
                            <a href="#" class="composition-author">Archiduke</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition ">News of the Universe</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <audio id="mediaplayer" data-showplaylist="true">
            <source src="mp3/Twice.mp3" title="Track 1" data-poster="track1.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 2" data-poster="track2.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 3" data-poster="track3.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 4" data-poster="track4.png" type="audio/mpeg">
        </audio>

    </div>

    <!-- ... end Playlist Popup -->


    <a class="back-to-top" href="#">
        <img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
    </a>


    <!-- Window-popup-CHAT for responsive min-width: 768px -->
    <!--聊天窗口 -->
    <div th:replace="~{chatCommon :: chatCommon}"></div>
    <div th:replace="~{findFriendModel :: modal}"></div>
    <!-- ... end Window-popup-CHAT for responsive min-width: 768px -->
    <div th:replace="~{commentCommon :: commentModal}"></div>
</div>
<!-- JS Scripts -->
<script src="js/jQuery/jquery-3.4.1.js"></script>
<script src="js/common.function.js"></script>
<script src="js/libs/jquery.appear.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/sticky-sidebar.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>
<script src="js/zoom.js"></script>
<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>
<script src="js/xtiper.min.js"></script>
<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>

<div th:replace="~{common :: common}"></div>
<script>
    $(document).on("click", "#header-photo", function () {
        document.getElementById("fileName0").click();
    });
    $(document).on("click", "#user-photo", function () {
        document.getElementById("fileName1").click();
    });
    $("#Timeline").addClass("active");
    $(document).ready(function(){
        $(".article-content").each(function () {
            $(this).html(delHtmlTag(marked($(this).html())));
        });
        function delHtmlTag(str){
            return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
        }
    });
</script>

</body>

</html>